/**
 * 开发过程
 * 1. 安装 parcel-bundle 插件作为服务访问 index.html 文件
 * 2. 安装 snabbdom 插件并且导入 snabbdom 中的 h 函数和 init 函数
 * 3. 整个开发过程中需要用到 class 样式和 listener 事件， 所以这里导入 snabbdom 中的 class 模块和 eventlisteners 模块
 * 4. init() 注册 class 模块和 eventlisteners 模块，返回 patch()
 * 5. 设置全局变量
 * 6. 通过 h() 创建页面基本框架 view()，并且通过 patch() 渲染到 #app 元素位置
 * 7. 因为电影列表是个数组，也是可变数据，所以单独创建一个组件 movieView()
 * 8. 创建排序、增加、删除等操作的事件方法, 每次对数据的操作都要对页面重新渲染
 */
import { h, init } from 'snabbdom'
import className from 'snabbdom/modules/class'
import eventlisteners from 'snabbdom/modules/eventlisteners'

let patch = init([className, eventlisteners]) // 注册snabbdom模块
let sortBy = 'rank' // 页面加载默认按名次排序
let vnode = null    // 用来记录新的 h()

// 电影列表数据
const movieData = [
    { rank: 1, title: '小丑', desc: '小丑故事背景为1980年代，亚瑟·弗莱克和母亲居住在破旧的老公寓，需要依靠福利社会组织的帮助，并且还服用精神疾病药物的小丑，他想成为一名脱口秀演员却没有成功， 很多人也因此嘲笑他，后在地铁上爆发式的犯下了谋杀案，从此之后，他的世界逐渐崩塌了。' },
    { rank: 2, title: '何以为家', desc: '全片电影主要讲了一个生活在社会底层的12岁小孩，他的家庭十分贫穷，这个小孩从出生下来便没有出生证明，也意味着是一个没有资格获得护照的黑户，不能上学，不能去医院，作为长子还要养活自己和兄弟姐妹，过着悲苦万分的底层生活，后因为生活所迫持刀杀人而被判入狱，在律师的支持下，他以自己得不到保护和安全感为理由将自己的父母告上了法庭。' },
    { rank: 3, title: '绿皮书', desc: '绿皮书主要讲的是两个来自不同阶层、不同背景、不同肤色的人合作经历的故事，从一开始的不合、误会、矛盾到后来的彼此信任、互相帮助，其中相处过程中有很多的感人的细节，无数的温情和自然情感的流露都让人印象深刻，热泪盈眶。' },
    { rank: 4, title: '玩具总动员4', desc: '玩具总动员系列的电影口碑一直以来都受到了很多人的好评，整部电影看下来搞笑、愉快又充满着温情，让人十分感动。里面除了大家十分熟悉的好朋友之外还加入了一些新的朋友，也增添了了整部电影的神秘感和新鲜感。' },
    { rank: 5, title: '少年的你', desc: '少年的你是一部讲述青春、校园暴力为主题的电影。在经历了上映、撤档的风波之后，发现其实一切都是值得等待的，这部电影在上映后，仅仅4天的时间票房就突破了6亿，主角陈念和小北的人物形象让所有人感到难过，18岁本应该是明媚而又快乐的，他们却在18岁的夏天尝到了成人世界的冷漠和现实。这部电影也让很多人开始关注了校园暴力这个话题。' },
    { rank: 6, title: '寄生虫', desc: '寄生虫主要讲的是韩国的底层社会和上流社会的差别，整个故事十分具有讽刺性又带有一些黑色幽默，以现实主义为题材的一个影片，一家四口全是无业游民，后积极向上的长子凭借伪造的文凭来到富豪社长的家中应征家教，两个不同阶级的家庭也开始有了交集。' },
    { rank: 7, title: '哪吒之魔童降世', desc: '哪吒大闹东海龙宫，杀龙取筋后过关斩将、护周伐纣和降妖除魔的人物形象深入人心，电影一改往日的形象，给我们呈现了一幅新的感觉，哪吒不服输的精神形象也让人十分感动，整个电影制作精良，特效场面令人震撼，在前作的基础上大胆创新，在保留中国传统文化的基础基础上又加上了流行元素，让观众也能够轻易的接受，也被人称为国产动漫的传奇。' },
    { rank: 8, title: '复仇者联盟4', desc: '漫威迷对这部电影的期待可想而知，这部电影贡献的票房，多多少少也有情怀存在，电影的剧情并非十分吸引人，有网友说，用了三个小时的时间和大家告别，是集结也是重聚，是告别是牺牲，作为系列的最终篇，确实已经做到最好了，有笑点、有泪点、也有燃点。' },
    { rank: 9, title: '我和我的祖国', desc: '这是建国70周年的献礼片，不管是导演还是演员阵容，都十分的强大， 取材于祖国经历的无数个历史性经典瞬间，主要讲述的是普通人和国家之间密不可分的动人故事，一个个鲜活的人物形象也勾起了一段段难以忘怀的历史记忆。' },
    { rank: 10, title: '流浪地球', desc: '流浪地球被称为国内科幻电影之最，尽管赶不上国外的一些科幻大片，但是也让我们看到了中国科幻电影的未来，其中加入的中国人的中国情怀也让整个科幻片更具有特色，故事设定为2075年，讲述了太阳即将毁灭，在不适合人类生存。即将面临绝境的情况下，人类开启了流浪地球的计划，试图带着地球一起逃离太阳系，寻找新家园的故事。' },
]

// 创建页面框架
function view() {
    return h('div#app', [
        h('h1', '国内电影排行榜前十'),
        h('div', [
            h('a.btn.add', { on: { click: add } }, '增加'),
            '排序:',
            h('span.btn-group', [
                h('a.btn.rank', { class: { active: sortBy === 'rank'}, on: { click: [changeSort, 'rank'] } }, '名次'),
                h('a.btn.title', { class: { active: sortBy === 'title'}, on: { click: [changeSort, 'title'] } }, '标题'),
                h('a.btn.desc', { class: { active: sortBy === 'desc'}, on: { click: [changeSort, 'desc'] } }, '描述')
            ])
        ]),
        h('div.list', movieData.map(movieView))
    ])
}

// 遍历movie数据，创建 dom 元素
function movieView(movie, index) { 
    return  h('div.row', [
            h('span', movie.rank),
            h('span', movie.title),
            h('span', movie.desc),
            h('a.close-btn', { on: { click: [removeMovie, index]}}, 'x')
    ])
}

/**
 * 添加电影，通过随机数取整作为 movieData 的下标，获取对应下标的数据，并添加到 movieData 数组的第一个
 */
function add () {
    let n = movieData[Math.floor(Math.random() * 10)]
    let newMovie = { rank: movieData.length + 1, title: n.title, desc: n.desc }
    movieData.unshift(newMovie)
    render()
}

/**
 * 排序，点击时获取排序参数 target，sort() 比较对象的顺序重新排序
 * @param {*} target 
 */
function changeSort(target) {
    sortBy = target
    movieData.sort( (a, b) => {
        if (target === 'rank') {
            return a[target] - b[target]
        } else {
            return a[target].localeCompare(b[target]); // 中文第一个字的拼音首字母排序
        }
    })
    render()
}

/**
 * 获取当前数据的下标，通过 splice() 移除对应下标的数据
 * @param {*} _index 
 */
function removeMovie (_index) {
    if (movieData.length > 1) {
        movieData.splice(_index, 1)
        render()
    }
}

// 通过 patch() 重新渲染页面，并重新记录 vnode
function render () {
    vnode = patch(vnode, view())
}

// 第一次渲染页面
let app = document.querySelector('#app')
vnode = patch(app, view())